import React, {useEffect, useState} from 'react'
import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式
import '@/style/industry.scss'
let proSwiper = null
function Industry() {
	const [productIndex, setProductIndex] = useState(0);
	const href = window.location.href;
	const typeName = href.split('?type=') ? href.split('?type=')[1] : '';
	const strengthData = [
		{
			icon: require('@/images/industry/domain1.png'),
			title: '新能源',
			content: "在我国“碳达峰、碳中和”政策推动下，新能源发电和新能源汽车等行业迎来了空前的高速发展期。新能源行业对绝缘材料产品的耐候性（耐高热、耐冲击、耐腐蚀、耐辐照等）需求应用要高于传统行业，丰源电力研发创新多种新产品，被应用于风电、光伏、及储能等行业。"
		},
		{
			icon: require('@/images/industry/domain2.png'),
			title: '风电',
			content: "风力发电设备所处的工作环境存在复杂多变性，设备长期处于高温、高湿、高盐雾、风雨侵蚀、冲击、振动等的环境中。因此对风力发电设备应用的绝缘材料提出了更高性能和使用寿命的使用要求。丰源电力产品以稳定的性能来保证风力发电设备长期顺利的运转。"
		},
		{
			icon: require('@/images/industry/domain3.png'),
			title: '光伏',
			content: "光伏发电即利用相关媒介将最清洁、安全和可靠的太阳能转换为电能的一种技术。光伏行业作为推动能源转型和绿色经济复苏的“主力产业”，正迎来前所未有的发展机遇。为进一步促进相关技术提升，丰源电力协助开发高性能光伏发电的应用新材料，进一步促进“碳达峰、碳中和”的目标达成。"
		},
	];

    const workpieceData = [
		{
			icon: require('@/images/industry/SMC加工件.jpg'),
			content: 'SMC加工件'
		},
		{
			icon: require('@/images/industry/PC板加工件.jpg'),
			content: 'PC板加工件'
		},
		{
			icon: require('@/images/industry/尼龙板加工件.jpg'),
			content: '尼龙板加工件'
		},
		{
			icon: require('@/images/industry/树脂板加工件.jpg'),
			content: '树脂板加工件'
		},
		]

	const SMCData = [

		{
			icon: require('@/images/industry/SMC模压件 (1).jpg'),
			content: 'SMC模压件(1)'
		},
		{
			icon: require('@/images/industry/SMC模压件 (2).jpg'),
			content: 'SMC模压件(2)'
		},
		{
			icon: require('@/images/industry/SMC模压件 (3).jpg'),
			content: 'SMC模压件(3)'
		},
		{
			icon: require('@/images/industry/SMC模压件 (4).jpg'),
			content: 'SMC模压件(4)'
		},
		]
	const sectionalMaterialData = [
		{
			icon: require('@/images/industry/槽型材加工件.jpg'),
			content: '槽型材加工件'
		},
		{
			icon: require('@/images/industry/型材加工件.jpg'),
			content: '型材加工件'
		},
		{
			icon: require('@/images/industry/“工”字型型材.jpg'),
			content: '“工”字型型材'
		},
		{
			icon: require('@/images/industry/“王”字梁型材 (1).jpg'),
			content: '“王”字梁型材'
		},

		]

	const moldedPartlData = [
		{
			icon: require('@/images/industry/模塑件 (1).jpg'),
			content: '模塑件 (1)'
		},
		{
			icon: require('@/images/industry/模塑件 (2).jpg'),
			content: '模塑件 (2)'
		},
		]

	const initSwiper = () => {
		proSwiper = new Swiper('.pro-swiper', {
			loop: false,
			autoplay: false,//可选选项，自动滑动
			observer:true,
			observeParents:true
		})
	};
    useEffect(() => {
        initSwiper();
		if (typeName) {
			scroll(typeName);
		}
    }, [])
	const scroll = (typeName) => {
		let element = document.getElementById(typeName)
		element.scrollIntoView({ block: 'center', behavior: 'smooth' })
	}
	return (
		<>
			<div className="industryoBanner">
			</div> 
			<div className="domainBox">
				<div className="mainContent">
					<p className="boxTitle" id="applicationDomain">应用领域</p>
					{strengthData.map((item, index) => {
						return (
							<div className="strengthItem flexSpaceBetween" key={index}>
								{index % 2 === 0 && (
									<img src={item.icon}></img>
								)}
								
								<div className="strengthText">
									<p>{item.title}</p>
									<span>{item.content}</span>
								</div>
								{index % 2 !== 0 && (
									<img src={item.icon}></img>
								)}
							</div>
						)
					})}
					<p className="boxTitle" id="industryShow">产品展示</p>
					<div className="businessBox">
						<p className="boxTitle">加工件</p>
						<div className="mainContent flexSpaceBetween">
							{workpieceData.map((item, index) => {
								return (
									<div className="businessItem">
										<img src={item.icon}></img>
										<p>{item.content}</p>
									</div>
									)
							})}
						</div>
					</div>
					<div className="businessBox">
						<p className="boxTitle">SMC模压件</p>
						<div className="mainContent flexSpaceBetween">
							{SMCData.map((item, index) => {
								return (
									<div className="businessItem">
										<img src={item.icon}></img>
										<p>{item.content}</p>
									</div>
									)
							})}
						</div>
					</div>
					<div className="businessBox">
						<p className="boxTitle">型材</p>
						<div className="mainContent flexSpaceBetween">
							{sectionalMaterialData.map((item, index) => {
								return (
									<div className="businessItem">
										<img src={item.icon}></img>
										<p>{item.content}</p>
									</div>
									)
							})}
						</div>
					</div>
					<div className="businessBox">
						<p className="boxTitle">模塑件</p>
						<div className="mainContent flexSpaceBetween">
							{moldedPartlData.map((item, index) => {
								return (
									<div className="businessItem">
										<img src={item.icon}></img>
										<p>{item.content}</p>
									</div>
									)
							})}
						</div>
					</div>
				</div>
				
			</div>
		</>
		
	)
}
 
export default Industry